<template>
      <div id="serve">
            <div class="container">
                  <div class="title">
                        <div class="top">
                            三大系列产品+服务
                        </div>
                        <div class="bottom">
                              打造全新AI智慧行业场景解决方案
                        </div>
                        <div class="info">
                              一站式部署方案，快速完成服务商客户智能收银系统基础设施搭建，助力商
                              户打造AI智慧行业场景解决方案
                        </div>
                  </div>
                  <!-- list -->
                  <div class="list">
                        <div class="item" v-for="(item, index) in list" :key="index">
                              <div class="iconbox">
                                    <img :src="item.icon" alt="">
                              </div>
                              <div class="infobox">
                                    <div class="titile">
                                          {{ item.title }}
                                    </div>
                                    <div class="info">
                                          {{ item.txt }}
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    icon: require("../../assets/img/a5.png"),
                                    title: "刷脸支付",
                                    txt: "极速落地自助收银和智慧零售收银场景"
                              },
                              {
                                    icon: require("../../assets/img/a5.png"),
                                    title: "智慧营销",
                                    txt: "零售收银场景拉新、促活、留存，在各个环节帮助商户搭建店铺自有营销闭环"
                              },
                              {
                                    icon: require("../../assets/img/a5.png"),
                                    title: "行业智慧场景解决方案",
                                    txt: "深入场景的平台化智能管理“软件+硬件”无缝组合"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#serve {
      width: 100%;
      max-width: 750px;
      margin-top: 0.4rem;
      .container {
            width: 100%;
            .title {
                  width: 100%;
                  font-size: 0.36rem;
                  text-align: center;
                  .info {
                        font-size: 0.16rem;
                        width: 5.65rem;
                        margin: 0 auto;
                  }
            }
            .list {
                  width: 100%;
                  font-size: 0.24rem;
                  .item {
                        width: 100%;
                        padding: 0.2rem 0.3rem;
                        margin:  0.3rem 0;
                        display: flex;
                        align-items: center;
                        border-bottom: 1px dashed #999999;
                        .iconbox {
                              width: 1.28rem;
                              height: 1.47rem;
                              overflow: hidden;
                              img {
                                   width: 1.28rem;
                                    height: 1.47rem; 
                                    display: block;
                              }
                        }
                        .infobox {
                              flex:1;
                              margin-left: 0.3rem;
                              .info {
                                    font-size: 0.2rem;
                                    margin-top: 0.2rem;
                              }
                        }
                  }
            }
      }
}
</style>